<template>
  <div class="table-search-page">
    <div style="background: #ffffff; margin: -16px -18px 10px;padding: 0 24px;">
      <a-tabs :activeKey="currentActiveKey" @change="changeTabs" type="line">
        <a-tab-pane :key="1" tab="未收完"></a-tab-pane>
        <a-tab-pane :key="2" tab="已收完"></a-tab-pane>
        <a-tab-pane :key="3" tab="已退费"></a-tab-pane>
      </a-tabs>
    </div>
    <a-card class="g-mt-10" :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form" :selfUpdate="true">
          <a-row :gutter="12">
            <a-col :md="12" :lg="6" :sm="12" style="padding: 0 4px;">
              <a-form-item label="开单时间">
                <a-range-picker allow-clear v-decorator="['time']" style="width: 100%;">
                  <a-icon slot="suffixIcon" type="calendar"/>
                </a-range-picker>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
              <a-form-item label="客户卡号">
                <a-input v-decorator="['cardNo']" allow-clear placeholder="客户卡号"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
              <a-form-item label="联系号码">
                <a-input v-decorator="['mobile']" allow-clear placeholder="联系号码"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="4" :sm="12" style="padding: 0 4px;">
              <a-form-item label="客户姓名">
                <a-input v-decorator="['name']" style="width: 100%" allow-clear placeholder="姓名"/>
              </a-form-item>
            </a-col>
            <a-col :md="2" :lg="4" :sm="12">
              <div class="table-page-search-submitButtons g-flex" style="margin-bottom: 4px;">
                <a-icon :type="advanced ? 'up' : 'down'" @click="advanced=!advanced" style="margin-right: 15px;"/>
                <a-button type="primary" @click="clickSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="clickReset">重置</a-button>
              </div>
            </a-col>
          </a-row>
          <a-row :gutter="12" v-show="advanced">
            <a-col :md="12" :lg="6" :sm="12" style="padding: 0 4px;">
              <a-form-item label="开发人员">
                <a-select
                  @search="select_search_developer"
                  :showSearch="true"
                  option-filter-prop="children"
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['developer']"
                  placeholder="选择，搜索">
                  <a-select-option v-for="item in developerUser.userList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
              <a-form-item label="所属咨询">
                <a-select
                  @search="select_search_consultMan"
                  :showSearch="true"
                  option-filter-prop="children"
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['consultMan']"
                  placeholder="选择，搜索">
                  <a-select-option v-for="item in allHisUser.userList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
              <a-form-item label="客户等级">
                <a-select
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['customerLevel']"
                  placeholder="客户等级">
                  <a-select-option v-for="item in customerLevel" :key="item.id" :label="item.name" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="4" :sm="12" style="padding: 0 4px;">
              <a-form-item label="客户状态">
                <a-select
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['customerState']"
                  placeholder="状态">
                  <a-select-option v-for="item in customerState" :key="item.id" :label="item.name" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card :bordered="false">
      <super-table
        :scroll="{ x: 1300}"
        ref="table"
        :rowKey="(record,index)=> index"
        :columns="columns"
        :data="loadData"
      >
        <!--序号-->
        <template slot="index" slot-scope="text,record,index">
          <span>{{(queryParam.pageNum-1)*pagination.pageSize+(index+1)}}</span>
        </template>
        <!--客户卡号-->
        <template slot="cardNo" slot-scope="text,record">
          <a class=" g-f-14" @click="toCustomerDetails(text,record)">{{ text }}</a>
        </template>
        <template slot="action" slot-scope="text,record">
          <div class="g-flex">
            <a-button style="padding:0;" type="link" v-if="currentActiveKey!==2" @click="openDrawer(record)" >收费记录</a-button>
            <a-button style="padding:0;" type="link" @click="clickItemCharge(record)">收费</a-button>
            <a-button style="padding:0;" type="link" v-if="currentActiveKey===2" @click="refund(record)">收费记录</a-button>
            <a-button style="padding:0;" type="link" v-if="currentActiveKey===3" @click="clickItemCharge(record)">项目详情</a-button>
          </div>
        </template>
      </super-table>
    </a-card>
    <!--项目收费--弹窗-->
    <item-charge ref="itemCharge" @itemChargeSuccess="itemChargeSuccess" :row_record="current_row_record"></item-charge>
    <!--项目抽屉--弹窗-->
    <item-drawer ref="itemDrawer" :row_record="current_row_record" />
    <!--收费详情--弹窗-->
    <charge-details-drawer ref="ChargeDetailsDrawer" :row_record="current_row_record"/>
  </div>
</template>

<script>
import { AllHisUser, CustomerLevel, CustomerState } from '@/api/customer/customer'
import { dictTypeListForCode } from '@/api/modular/main/customer/customerTriage'
import { CustomerFeedback } from '@/api/modular/main/customer/customerReturnVisit'
import {receivableList} from '@/api/modular/main/customer/cashier'
import { SuperTable, upTime } from '@/components'
import itemCharge from '@/views/customer/cashier/itemCharge'
import itemDrawer from '@/views/customer/cashier/itemDrawer'
import moment from 'moment'
import ChargeDetailsDrawer from '@/views/customer/cashier/ChargeDetailsDrawer'

export default {
  components: {
    SuperTable,
    upTime,
    itemCharge,
    ChargeDetailsDrawer,
    itemDrawer
  },
  data() {
    return {
      loadData: parameter => {
        this.queryParam.pageNum = parameter.pageNum
        this.queryParam.pageSize = parameter.pageSize
        return receivableList(this.queryParam).then(res => {
          this.loading = false//关闭加载
          return res
        })
      },
      form: this.$form.createForm(this),
      customerState: [],//客户状态
      customerLevel: [],//客户等级
      advanced: false, // 高级搜索 展开/关闭
      disabled: true, //是否禁用新增按钮
      current_row_record: {},
      columns: [
        { title: '序号', scopedSlots: { customRender: 'index' },width:80,fixed:'left' },
        { title: '客户卡号', dataIndex: 'cardNo', width: 120, scopedSlots: { customRender: 'cardNo' },fixed:'left', ellipsis: true },
        { title: '客户姓名', dataIndex: 'name', width: 100, ellipsis: true },
        { title: '订单号', dataIndex: 'state', width: 100, ellipsis: true },
        { title: '应收金额', dataIndex: '1', width: 120, ellipsis: true },
        { title: '已收金额', dataIndex: '2', width: 120, ellipsis: true },
        { title: '未收金额', dataIndex: '3', width: 120, ellipsis: true },
        { title: '收费状态', dataIndex: 'orderId', width: 120, ellipsis: true },
        { title: '操作', scopedSlots: { customRender: 'action' }, fixed:'right', width: 140 },
      ],
      columns_refund: [
        { title: '序号', scopedSlots: { customRender: 'index' },width:80,fixed:'left' },
        { title: '订单号', dataIndex: 'cardNo', width: 120, scopedSlots: { customRender: 'cardNo' },fixed:'left', ellipsis: true },
        { title: '客户卡号', dataIndex: 'name', width: 100, ellipsis: true },
        { title: '客户姓名', dataIndex: 'state', width: 100, ellipsis: true },
        { title: '应收金额', dataIndex: '1', width: 120, ellipsis: true },
        { title: '已收金额', dataIndex: '2', width: 120, ellipsis: true },
        { title: '未收金额', dataIndex: '3', width: 120, ellipsis: true },
        { title: '收费状态', dataIndex: '4', width: 120, ellipsis: true },
        { title: '操作', scopedSlots: { customRender: 'action' }, fixed:'right', width: 100 },
      ],
      columns_had_refund_item: [
        { title: '序号', scopedSlots: { customRender: 'index' },width:80,fixed:'left' },
        { title: '账单数', dataIndex: 'cardNo', width: 120, scopedSlots: { customRender: 'cardNo' },fixed:'left', ellipsis: true },
        { title: '客户卡号', dataIndex: 'name', width: 100, ellipsis: true },
        { title: '咨询师', dataIndex: 'state', width: 100, ellipsis: true },
        { title: '应收金额', dataIndex: '1', width: 120, ellipsis: true },
        { title: '已收金额', dataIndex: '2', width: 120, ellipsis: true },
        { title: '订单状态', dataIndex: '4', width: 120, ellipsis: true },
        { title: '操作', scopedSlots: { customRender: 'action' }, fixed:'right', width: 100 },
      ],
      data: [],
      pagination: {
        current: 1,//当前页
        pageSize: 10,//当前页数
        total: 0,//总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30'],//这里注意只能是字符串，不能是数字
        showTotal: total => `共有 ${total} 条数据`//分页中显示总的数据
      },
      // 查询参数
      queryParam: {
        pageNum: 1,//第几页
        pageSize: 10,//每页中显示数据的条数
        type: 1,
        begintime: undefined,
        endtime: undefined,
        chargeType:1
      },
      loading: true, //加载状态,
      current_row_index: '',
      customerFeedback: {},
      allHisUser: {}, //回访人对象
      developerUser:{},//所属咨询
      currentActiveKey: 1,
    }
  },
  created() {
    // this.clickArrearsCharge()
    this.getBaseFormInfo()
  },
  methods: {
    checkPattern(str) {
      const pattern = new RegExp('[\u4E00-\u9FA5]+')
      if (pattern.test(str)) {
        return true
      }
      return false
    },
    //下拉框搜索查找
    select_search_consultMan(value) {
      this.form.setFieldsValue({
        consultMan: value
      })
    },
    //下拉框搜索查找
    select_search_developer(value) {
      this.form.setFieldsValue({
        developer: value
      })
    },

    moment,

    toCountDown(time) {
      //1000代表1秒，1000*60代表60分钟
      return Date.now() + parseInt(time) * 1000
    },
    minutesToSeconds(time) {
      return parseInt(time)
    },
    changeRadio(e){
      const value =e.target.value
      console.log(value)
      this.queryParam.chargeType = value
      this.$refs.table.loadData()
    },
    //点击查询-高级搜索
    clickSearch() {
      const type = this.queryParam.type
      const form_values = this.form.getFieldsValue()
      const time = form_values.time
      if (time && time.length > 0) {
        form_values.begintime = moment(time[0]).format('YYYY-MM-DD')
        form_values.endtime = moment(time[1]).format('YYYY-MM-DD')
      }
      /**下拉框搜索**/
      const tempConsultManFlag = this.checkPattern(form_values.consultMan)
      const tempdeveloperFlag = this.checkPattern(form_values.developer)

      let tempConsultManValue
      let tempdeveloperValue
      if (tempConsultManFlag) {
        const obj = this.allHisUser.userList.filter(item => form_values.consultMan == item.name)[0]
        tempConsultManValue = form_values.consultMan
        form_values.consultMan = obj ? obj.id : tempConsultManValue
      }
      if (tempdeveloperFlag) {
        const obj = this.allHisUser.userList.filter(item => form_values.developer == item.name)[0]
        tempdeveloperValue = form_values.developer
        form_values.developer = obj ? obj.id : tempdeveloperValue
      }
      form_values.type = this.queryParam.type // 头部tabs 由于没存放在表单里面，故需要单独处理
      this.queryParam = form_values
      this.queryParam.time = undefined
      this.queryParam.pageNum = 1
      this.queryParam.pageSize = 10
      this.queryParam.type = type
      console.log('查询参数queryParam', this.queryParam)
      this.$refs.table.loadData()
      setTimeout(() => {
        if (tempConsultManFlag) {
          this.form.setFieldsValue({
            consultMan: tempConsultManValue
          })
        }
        if (tempdeveloperFlag) {
          this.form.setFieldsValue({
            developer: tempdeveloperValue
          })
        }
      }, 500)
    },
    clickReset() {
      this.form.resetFields()
      const form_values = this.form.getFieldsValue()
      this.queryParam = form_values
      this.queryParam.pageNum = 1
      this.queryParam.pageSize = 10
    },
    openDrawer(record){
      this.current_row_record=record
      this.$refs.itemDrawer.show()
    },
    /**
     * 已收费-退费
     * **/
    refund(record){
      const _this =this
      this.$confirm({
        title: '确认要将笔订单做退费处理吗？',
        content: h => <div style="color:red;">该订单将退费，如果再次收款，请前往未收费列表</div>,
        onOk() {
          console.log('退回')
          const orderId=record.orderId
        },
        onCancel() {
          console.log('Cancel');
        },
        class: 'test',
      });
    },

    /***
     * 项目收费成功
     * **/
    itemChargeSuccess(){
      this.$refs.table.refresh()
    },
    /***
     * 已收费-详情
     * **/
    clickChargeDetails(record){
      this.current_row_record=record
      this.$refs.ChargeDetailsDrawer.show()
    },
    /***
     * 未收齐-收费
     * **/
    clickArrearsCharge(record){
      this.$router.push({
        path: '/arrearsToCharge'
      })
    },
    changeTabs(key) {
      this.currentActiveKey = key
      this.queryParam.type = key
      if(key==3||key==4){
        this.queryParam.chargeType=undefined
      }
      this.$nextTick(()=>{
        this.$refs.table.loadData()
      })

    },
    //点击查看客户详情
    toCustomerDetails(text, record) {
      // console.log(record)
      this.$router.push({
        path: 'customer_details', query: {
          id: record.customerId,
          card_no: record.cardNo,
          customerName:record.customerName
        }
      })
    },
    clickItemCharge(record){
      this.current_row_record=record
      this.$refs.itemCharge.show()
    },
    clickDepositCharge(record){
      this.current_row_record=record
      this.$refs.depositCharge.show()
    },
    // 表格行点击事件
    clickRow(record, index) {
      return {
        on: {
          click: () => {
            // console.log('点击当前行',record)
            this.disabled = false
            this.current_row_index = index
            this.current_row_record = record
          }
        }
      }
    },
    //获取表单相关接口
    getBaseFormInfo() {
      CustomerFeedback().then(res => {
        // console.log('回访相关表单接口',res)
        this.customerFeedback = res
      })
      // dictTypeListForCode  AllHisUser  所属咨询
      dictTypeListForCode({code:"XCZXS"}).then((res) => {
      // console.log('全员员工接口',res)
        this.allHisUser = res
      })
      // 开发人员 
      dictTypeListForCode({code:"WLZXS"}).then((res) => {
      // console.log('全员员工接口',res)
        this.developerUser = res
      })
      CustomerLevel().then(res => {
        this.customerLevel = res
      })
      CustomerState().then(res => {
        this.customerState = res
      })
    }
  }

}
</script>

<style lang="less" scoped>

.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
  margin-bottom: 2px;
}

.currentRowClass {
  background: #e6f7ff;
}

/deep/ .ant-tabs-bar {
  border-bottom: none;
}

/deep/ .ant-badge-count, .ant-badge-dot, .ant-badge .ant-scroll-number-custom-component {
  right: -10px;
}
</style>